<template>

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="班前检查内容" name="first">
      <div v-if="safetyCheckData.preShift">
        <el-descriptions :column="2" size="medium" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              消防通道是否畅通
            </template>

            <el-tag type="success" size="medium" v-if="safetyCheckData.preShift.fireExitClear">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              火灾报警系统运转是否正常
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.preShift.fireAlarmOk">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              监视系统运转是否正常
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.preShift.monitorOk">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              红外线报警系统运转是否正常
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.preShift.infraredAlarmOk">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              保险柜是否安全
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.preShift.safeSecure">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              照明、营业厅设备及器材是否正常
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.preShift.equipmentOk">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              电源线是否捆扎整齐，有无乱接、拉线
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.preShift.wiringTidy">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-tickets"></i>
              营业环境是否卫生清洁
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.preShift.environmentClean">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="发现问题" :span="2">{{ safetyCheckData.preShift.issues }}</el-descriptions-item>
          <el-descriptions-item label="处理及落实情况" :span="2">{{ safetyCheckData.preShift.solutions
            }}</el-descriptions-item>
          <el-descriptions-item label="安全员签名" :span="2" v-if="safetyCheckData.preShift.anSignature">
            <img @click="previewBigImage([api + '/' + safetyCheckData.preShift.anSignature])"
              :src="api + '/' + safetyCheckData.preShift.anSignature" style="width: 100px;height: 100px;" />
          </el-descriptions-item>
          <el-descriptions-item label="值班保安签名" :span="2" v-if="safetyCheckData.preShift.baoSignature">
            <img @click="previewBigImage([api + '/' + safetyCheckData.preShift.baoSignature])"
              :src="api + '/' + safetyCheckData.preShift.baoSignature" style="width: 100px;height: 100px;" />
          </el-descriptions-item>
          <el-descriptions-item label="现场图片" :span="2" v-if="safetyCheckData.preShift.pics">
            <div  style="display: flex;gap: 10px;">
              <img v-for="img in safetyCheckData.preShift.pics.split(',')" @click="previewBigImage([api + '/' + img])"
              :src="[api + '/' + img]" style="width: 100px;height: 100px;" />
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else>
        <el-empty description="暂无数据"></el-empty>
      </div>
    </el-tab-pane>
    <el-tab-pane label="班中检查内容" name="second">
      <div v-if="safetyCheckData.midShift">
        <el-descriptions :column="2" size="medium" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              营业厅设备及器材是否正常
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.midShift.equipmentStatus">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>

          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              火灾报警系统运转是否正常
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.midShift.fireAlarmStatus">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              监视系统运转是否正常
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.midShift.monitorStatus">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              营业厅秩序是否良好
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.midShift.orderStatus">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-tickets"></i>
              值班保安是否在岗
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.midShift.securityOnDuty">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="发现问题" :span="2">{{ safetyCheckData.midShift.issues }}</el-descriptions-item>
          <el-descriptions-item label="处理及落实情况" :span="2">{{ safetyCheckData.midShift.solutions
            }}</el-descriptions-item>

          <el-descriptions-item label="安全员签名" :span="2" v-if="safetyCheckData.midShift.anSignature">
            <img @click="previewBigImage([api + '/' + safetyCheckData.midShift.anSignature])"
              :src="api + '/' + safetyCheckData.midShift.anSignature" style="width: 100px;height: 100px;" />
          </el-descriptions-item>
          <el-descriptions-item label="值班保安签名" :span="2" v-if="safetyCheckData.midShift.baoSignature">
            <img @click="previewBigImage([api + '/' + safetyCheckData.midShift.baoSignature])"
              :src="api + '/' + safetyCheckData.midShift.baoSignature" style="width: 100px;height: 100px;" />
          </el-descriptions-item>
          <el-descriptions-item label="现场图片" :span="2" v-if="safetyCheckData.midShift.pics">
            <div  style="display: flex;gap: 10px;">
            <img v-for="img in safetyCheckData.midShift.pics.split(',')" @click="previewBigImage([api + '/' + img])"
              :src="[api + '/' + img]" style="width: 100px;height: 100px;" />
              </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else>
        <el-empty description="暂无数据"></el-empty>
      </div>

    </el-tab-pane>
    <el-tab-pane label="班后检查内容" name="third">
      <div v-if="safetyCheckData.postShift">
        <el-descriptions :column="2" size="medium" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              照明、电器电源是否全部关闭
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.postShift.powerOff">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              门窗是否全部关闭并锁好
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.postShift.doorsLocked">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              保险柜是否锁好，钥匙是否管好或交接好
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.postShift.safeLocked">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              有价卡及现金是否清点清楚入柜
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.postShift.cashSecured">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              监视系统运转是否正常
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.postShift.monitorOk">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              火灾报警系统运转是否正常
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.postShift.fireAlarmOk">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-tickets"></i>
              红外线报警系统运转是否正常并进行设防
            </template>
            <el-tag type="success" size="medium" v-if="safetyCheckData.postShift.infraredArmed">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="发现问题" :span="2">{{ safetyCheckData.postShift.issues }}</el-descriptions-item>
          <el-descriptions-item label="处理及落实情况" :span="2">{{ safetyCheckData.postShift.solutions
            }}</el-descriptions-item>

          <el-descriptions-item label="安全员签名" :span="2" v-if="safetyCheckData.postShift.anSignature">
            <img @click="previewBigImage([api + '/' + safetyCheckData.postShift.anSignature])"
              :src="api + '/' + safetyCheckData.postShift.anSignature" style="width: 100px;height: 100px;" />
          </el-descriptions-item>
          <el-descriptions-item label="值班保安签名" :span="2" v-if="safetyCheckData.postShift.baoSignature">
            <img @click="previewBigImage([api + '/' + safetyCheckData.postShift.baoSignature])"
              :src="api + '/' + safetyCheckData.postShift.baoSignature" style="width: 100px;height: 100px;" />
          </el-descriptions-item>
          <el-descriptions-item label="是否厅经理本人签名" :span="2" v-if="safetyCheckData.postShift.tingSignature">
            <el-tag type="success" size="medium" v-if="safetyCheckData.postShift.inPerson==1">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="非本人签名原因" :span="2" v-if="safetyCheckData.postShift.inPerson==0">
             {{ safetyCheckData.postShift.notes }}
          </el-descriptions-item>
          <el-descriptions-item label="厅经理签名" :span="2" v-if="safetyCheckData.postShift.tingSignature">
            <img @click="previewBigImage([api + '/' + safetyCheckData.postShift.tingSignature])"
              :src="api + '/' + safetyCheckData.postShift.tingSignature" style="width: 100px;height: 100px;" />
          </el-descriptions-item>
          <el-descriptions-item label="现场图片" :span="2" v-if="safetyCheckData.postShift.pics">
            <div  style="display: flex;gap: 10px;">
            <img v-for="img in safetyCheckData.postShift.pics.split(',')" @click="previewBigImage([api + '/' + img])"
              :src="[api + '/' + img]" style="width: 100px;height: 100px;" />
              </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else>
        <el-empty description="暂无数据"></el-empty>
      </div>
    </el-tab-pane>
    <el-image-viewer v-if="showViewer" :on-close="() => { showViewer = false }" :url-list="srcList" />
  </el-tabs>

</template>

<script>
import { Message } from 'element-ui'
import SafetyCheckApi from '../api/safetyCheck'

import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  name: 'SafetyCheckEdit',
  components: {
    ElImageViewer
  },
  props: {
    mode: {
      type: String
    },
    record: {
      type: Object
    }
  },
  data() {
    return {
      currentRecord: this.record,
      formRules: {},
      editLoading: false,
      showViewer: false,
      srcList: [],
      safetyCheckData: {
      },
      activeName: 'first',
      api: process.env.VUE_APP_BASE_API
    }
  },
  watch: {
    record: {
      handler:function (oldValue, newValue){
        this.getDetail()
      },
      immediate: true,
      deep: true
    }
  },
  // mounted() {


  // },
  methods: {

    handleClick(tab, event) {
      console.log(tab, event);
    },

    previewBigImage(srcList) {
      this.srcList = srcList;
      this.showViewer = true;
    },
    getDetail() {
      SafetyCheckApi.getSafetycheck({ id: this.record.checkId }).then(res => {
        this.safetyCheckData = res.data.data
      })
    }

  }
}
</script>
<style>
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  color: #000 !important;
}

.el-image-viewer__wrapper {
  z-index: 4000 !important;
}
</style>